<template>
  <div class="registration">
    <div class="main_formtop">
      <p>2022年全国名校招生报名全面启动</p>
      <p>名额有限，招满截止</p>
    </div>
    <form action class="form-get" method="GET">
      <div class="form-get1" v-for="it in baomingDate" :key="it.id">
        <span>{{ it.title }}</span>
        <input type="text" :placeholder="it.title1" name="Item_1" />
      </div>
      <button type="button">提交信息</button>
    </form>
    <!-- 重要通告 ！！！ -->
    <ImportantNotices />
  </div>
</template>

<script setup>
const baomingDate = [
  {
    title: "* 学生姓名 :",
    title1: "请输入你的名字",
    id: 0,
  },
  {
    title: "* 联系方式 :",
    title1: "请输入手机号",
    id: 1,
  },
  {
    title: "学生性别 :",
    title1: "请输入你的性别",
    id: 2,
  },
  {
    title: "出生时间 :",
    title1: "例如2020-10-03",
    id: 3,
  },
  {
    title: "学员身高 :",
    title1: "请输入你的身高",
    id: 4,
  },
  {
    title: "学员体重 :",
    title1: "请输入你的体重",
    id: 5,
  },
];
</script>

<style scoped>

.Enterprise {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.Enterprise1 {
  width: 3rem;
  height: 4rem;
}
.Enterprise1 img {
  width: 3rem;
  height: 3rem;
  border: 0.01rem solid #f0f0f0;
}
.Enterprise1 p {
  width: 100%;
  line-height: 1rem;
  font-size: 0.4rem;
  color: #666;
  text-align: center;
}
.registration {
  width: 100%;
  height: 20rem;
  background-image: url("/img/报名背景图.f9ed1c91.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.main_formtop {
  padding-top: 3rem;
  margin-bottom: 0.5rem;
}
.main_formtop p {
  text-align: center;
  font-size: 0.4rem;
  color: #f90;
}
.form-get {
  display: block;
  width: 12rem;
  height: auto;
  margin: 0 auto;
}
.form-get1 {
  width: 100%;
  height: 1.4rem;
  display: flex;
  justify-content: space-between;
}
.form-get1 span {
  display: block;
  width: 3rem;
  font-size: 0.4rem;
  color: #fff;
  text-align: right;
  line-height: 1.2rem;
  margin-right: 0.6rem;
}
.form-get1 input {
  width: 9rem;
  height: 1rem;
  font-size: 0.4rem;
  outline: none;
  border-width: 0.001rem;
  padding-left: 0.4rem;
  box-sizing: border-box;
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.form-get1 input::placeholder {
  color: #666;
}
.form-get button {
  display: block;
  width: 90%;
  height: 1.4rem;
  background-color: orange;
  color: #fff;
  text-align: center;
  line-height: 1.4rem;
  border-radius: 0.2rem;
  margin: 0 auto;
  outline: none;
  border: none;
  font-size: 0.4rem;
}
</style>